<template>
<div class="dashboard-container">
    <el-divider></el-divider>
    <div class="one-line">
        <span style="margin-left: 30px;color: #606266">{{ exampleInfo.exampleName }}</span>
    </div>
    <div style="margin-top: 10px">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">用例步骤</el-menu-item>
        <el-menu-item index="2">用例属性</el-menu-item>
        <el-menu-item index="3">执行历史</el-menu-item>
      </el-menu>
    </div>
    <!-- 用例步骤  开始-->
    <div v-if="activeIndex === '1'" class="margin-top20">
        <el-form ref="form" label-width="80px">
            <el-form-item label="前提条件:">
                <el-input type="textarea" v-model="exampleInfo.prerequisites" style="width: 80%" :autosize="{ minRows: 1 }"></el-input>
            </el-form-item>
        </el-form>
        <div >
          <el-button size="mini" class="proButton" @click="addStep" style="margin-bottom: 5px">添加步骤</el-button>
          <el-button size="mini" @click="updateSteps" style="margin-bottom: 5px" class="proButton">提交</el-button>
          <el-table  :data="tableData" >
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="步骤">
              <template slot-scope="scope">
                <el-input v-model="scope.row.stepName"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="数据">
              <template slot-scope="scope">
                <el-input v-model="scope.row.stepData"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="预期结果">
              <template slot-scope="scope">
                <el-input v-model="scope.row.expectedOutcome"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" style="padding:0" :disabled="scope.$index == 0" @click="moveUpward(scope.row, scope.$index)">上移</el-button>
                <el-button type="text" style="padding:0" :disabled="(scope.$index + 1) == tableData.length" @click="moveDown(scope.row, scope.$index)">下移</el-button>
                <el-button type="text" style="padding:0;color:#F56C6C" @click="deleteStep(scope.row, scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
    </div>
    <!-- 用例步骤  结束 -->
    <!-- 用例属性  开始 -->
    <div v-if="activeIndex === '2'" class="margin-top20">
      <el-button  class="proButton" size="small" @click="updateExample" style="margin-bottom: 15px;">提交</el-button>
      <el-descriptions :column='2'>
        <el-descriptions-item label="创建人">{{ exampleInfo.founderName }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ exampleInfo.createTime }}</el-descriptions-item>
        <el-descriptions-item label="用例名称">
          <el-input size="mini" v-model="exampleInfo.exampleName" placeholder="请输入内容" style="margin-top: -5px"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="关联缺陷数量">{{ exampleInfo.bugNumber }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column='1' class="describe" :contentStyle="{width: '60%'}">
        <el-descriptions-item label="测试目的">
          <el-input
            type="textarea"
            v-model="exampleInfo.expectedOutcome"
            :autosize="{ minRows: 4 }"
            placeholder="请输入内容"
            >
          </el-input>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 用例属性  结束 -->
    <!-- 执行历史  开始 -->
    <div v-if="activeIndex === '3'" class="margin-top20">
        <history-table v-bind:exampleId="exampleInfo.id"></history-table>
    </div>
    <!-- 执行历史  结束 -->
</div>
</template>

<script>

import historyTable from '@/views/proDetails/exampleManage/historyTable/index.vue'
import { renewStep, getSteps, renewExample } from '@/api/example'
import { formatTime } from '@/utils/validate'

export default {
  name: "exampleInformation",
  components:{historyTable},
  props:{
      exampleInfo:{
        type: Object,
        require: true
      }
    },
  data () {
    return {
        activeIndex: '1',
        tableData: [{stepName:'2',stepData: '22',expectedOutcome: '222 '},
        {stepName:'3',stepData: '33',expectedOutcome: '333'}],     //步骤表格数据
    };
  },
  methods:{
    updateSteps(){
      let params = {'exampleId':this.exampleInfo.id,'exampleSteps':this.tableData,'prerequisites':this.exampleInfo.prerequisites}
      renewStep(params).then((result) => {
        this.$message({type: 'success',message: result.msg})
      })
    },
    //三个模块的转动
    handleSelect(key){
      this.activeIndex = key
    },
    //添加步骤
    addStep(){
      let x = {one : ''}
      this.tableData.push(x)
    },
    //修改用例按确定后的方法
    updateExample(){
      let params = this.exampleInfo
      params.createTime = new Date(params.createTime)
      renewExample(params).then(res =>{
        this.$message({type: 'success',message: res.msg})
        params.createTime = formatTime(params.createTime)
      })
    },
    //上移
    moveUpward(row, index) {
      if (index > 0) {
        let upData = this.tableData[index - 1];
        this.tableData.splice(index - 1, 1);
        this.tableData.splice(index, 0, upData);
      } else {
        this.$message({
          message: '已经是第一条，上移失败',
          type: 'warning'
        });
      }
    },
    //下移
    moveDown(row, index) {
      if ((index + 1) == this.tableData.length) {
        this.$message({
        message: '已经是最后一条，下移失败',
        type: 'warning'
        });
      } else {
        let downData = this.tableData[index + 1];
        this.tableData.splice(index + 1, 1);
        this.tableData.splice(index, 0, downData);
      }
    },
    //删除
    deleteStep(row, index){
      this.tableData.splice(index,1)
    },
    //获取用例步骤
    getStep(){
      getSteps({exampleId:this.exampleInfo.id}).then(res =>{
        this.tableData = res.data
      })
    }
  },
  mounted(){
    this.getStep()
  }
}
</script>

<style lang="scss" scoped>
  .tag-style {
    margin-left: 30px;
    background-color: #E6A23C;
    color: #ffffff
  }

  .one-line {
    height: 50px;
    background-color: #f1f4f7;
    line-height: 50px
  }
  .margin-top20{
      margin-top: 20px;

  }
  .margin-top-5{
    margin-top: -5px
  }
  .describe >>> .el-descriptions-item__content{
    width: 100%;
  }
</style>